/**
* 历史交易记录
* 链接：this.$router.push({
* path:'/records',
* query:{
*    type:0,       //0-所有 1-股票 2-组合 3-比赛 (默认值为0)
*    userCode:'',  //被查询的用户ID
*    id:'',        //比赛／组合ID (查询比赛／组合交易记录时传参)
*    name:'',      //比赛／组合Name (查询组合交易记录时传参)
*    date:'',      //比赛／组合的创建日期 (查询组合交易记录时传参)
* })
*/
<template>
  <div class="situation_records">
    <header-top :option="headerOption"></header-top>
    <div class="records">
      <gj-loadmore :bottom-method="loadBottom" ref="loadmore">
        <ul class="records-wrap">
          <div class="shadow"></div>
          <li class="records-item" v-for="(item,index) in recordData.records" :key="index">
            <table class="group" v-if="item.entrust_type == '2' && item.subs.length > 0">
              <tr>
                <td class="circle_td">
                  <div class="group_circle">组</div>
                </td>
                <td class="triangle_td">
                  <div class="triangle"></div>
                </td>
                <td class="group_info-wrap">
                  <div class="group_info">
                    <div class="group_info_bar">
                      <span class="date">{{item.business_date}}</span>
                      <span class="clock">{{item.business_time}}</span>
                      <span class="operation-wrap">
                          <span v-if="item.subs.length > 1">建立组合</span>{{item.group_name}}
                      </span>
                    </div>
                    <div class="group_info_detail-wrap">
                      <div class="group_info_detail_item" v-for="(subItem,subIndex) in item.subs">
                        <span class="entrust_bs" v-if="(subItem.entrust_bs % 2 ) == 0">卖出</span>
                        <span class="entrust_bs" v-else>买入</span>
                        <span class="stock-name" @click.stop.prevent="toDetail(subItem)">{{subItem.stock_name}}</span>
                        <span class="number-wrap"><span class="number">{{subItem.business_vol}}</span>股</span>
                        <span class="price-wrap" v-if="(subItem.entrust_bs % 2 ) == 0">卖出价<span class="price">{{subItem.business_price | priceFilter}}</span></span>
                        <span class="price-wrap" v-else>买入价<span class="price">{{subItem.business_price | priceFilter}}</span></span>
                      </div>
                    </div>
                    <div class="info_reason">
                      <span v-if="item.reason1"><i class="iconfont" :class="item.reason1.reason_icon"></i>{{item.reason1.reason_text}}</span>
                      <span v-if="item.reason2"><i class="iconfont" :class="item.reason2.reason_icon"></i>{{item.reason2.reason_text}}</span>
                      <span v-if="item.reason3"><i class="iconfont" :class="item.reason3.reason_icon"></i>{{item.reason3.reason_text}}</span>
                    </div>
                  </div>
                </td>
              </tr>
            </table>
            <table class="sell" v-else-if="(item.entrust_bs % 2 ) == 0">
              <tr>
                <td class="circle_td">
                  <div class="sell_circle">卖</div>
                </td>
                <td class="triangle_td">
                  <div class="triangle"></div>
                </td>
                <td class="sell_info-wrap">
                  <div class="sell_info">
                    <div class="sell_info_bar">
                      <span class="date">{{item.business_date}}</span>
                      <span class="clock">{{item.business_time}}</span>
                      <span class="operation">模拟交易卖出</span>
                    </div>
                    <div class="sell_info_detail">
                      <span class="entrust_bs" v-if="item.entrust_bs == 0">限价卖出</span>
                      <span class="entrust_bs" v-else>市价卖出</span>
                      <span class="stock-name" @click.stop.prevent="toDetail(item)">{{item.stock_name}}</span>
                      <span class="number-wrap"><span class="number">{{item.business_vol}}</span>股</span>
                      <br/>
                      <span class="entrust_bs">卖出价</span>
                      <span class="price">{{item.business_price | priceFilter}}</span>
                    </div>
                    <div class="info_reason">
                      <span v-if="item.reason1"><i class="iconfont" :class="item.reason1.reason_icon"></i>{{item.reason1.reason_text}}</span>
                      <span v-if="item.reason2"><i class="iconfont" :class="item.reason2.reason_icon"></i>{{item.reason2.reason_text}}</span>
                      <span v-if="item.reason3"><i class="iconfont" :class="item.reason3.reason_icon"></i>{{item.reason3.reason_text}}</span>
                    </div>
                  </div>
                </td>
              </tr>
            </table>
            <table class="buy" v-else-if="(item.entrust_bs % 2 ) == 1">
              <tr>
                <td class="circle_td">
                  <div class="buy_circle">买</div>
                </td>
                <td class="triangle_td">
                  <div class="triangle"></div>
                </td>
                <td class="buy_info-wrap">
                  <div class="buy_info">
                    <div class="buy_info_bar">
                      <span class="date">{{item.business_date}}</span>
                      <span class="clock">{{item.business_time}}</span>
                      <span class="operation">模拟交易买入</span>
                    </div>
                    <div class="buy_info_detail">
                      <span class="entrust_bs" v-if="item.entrust_bs == 1">限价买入</span>
                      <span class="entrust_bs" v-else>市价买入</span>
                      <span class="stock-name" @click.stop.prevent="toDetail(item)">{{item.stock_name}}</span>
                      <span class="number-wrap"><span class="number">{{item.business_vol}}</span>股</span>
                      <br/>
                      <span class="entrust_bs">买入价</span>
                      <span class="price">{{item.business_price | priceFilter}}</span>
                    </div>
                    <div class="info_reason">
                      <span v-if="item.reason1"><i class="iconfont" :class="item.reason1.reason_icon"></i>{{item.reason1.reason_text}}</span>
                      <span v-if="item.reason2"><i class="iconfont" :class="item.reason2.reason_icon"></i>{{item.reason2.reason_text}}</span>
                      <span v-if="item.reason3"><i class="iconfont" :class="item.reason3.reason_icon"></i>{{item.reason3.reason_text}}</span>
                    </div>
                  </div>
                </td>
              </tr>
            </table>
          </li>
          <div class="line-vert"></div>
        </ul>
      </gj-loadmore>
    </div>
  </div>
</template>

<script>
  import CommonUtil from 'common/common.util'
  import Constant from 'common/constant'
  import LocalDAO from 'common/localDAO'
  import HeaderTop from 'components/HeaderTop'
  import RemoteDAO from 'common/remoteDAO'
  import LoadMore from 'components/LoadMore'

  export default {
    data () {
      return {
        headerOption: {
          title: '',
          leftBtn: Constant.leftBtn.BACK,
          operations: [Constant.operation.REFRESH]
        },
        requireData: {
          type: this.$route.query.type ? this.$route.query.type : "0",      //0-所有 1-股票 2-组合 3-比赛
          userCode: this.$route.query.userCode ? this.$route.query.userCode : LocalDAO.getUserCode(),   //被查询的用户ID
          id: this.$route.query.id ? this.$route.query.id : "",             //比赛／组合ID
          name: this.$route.query.name ? this.$route.query.name : "",       //比赛／组合Name
          date: this.$route.query.date ? this.$route.query.date : ""        //比赛／组合的创建日期
        },
        start: 0,           //开始索引
        limit: 20,          //结束索引
        totalRecords: [],   //接口返回的记录
        recordData: {       //封装数据
          records: []
        },
        isLogin: LocalDAO.getNickname() ? 1 : 0
      }
    },
    components: {
      HeaderTop,
      'gj-loadmore': LoadMore
    },
    created () {
      this.init();
    },
    methods: {
      init () {
        var checkUserCode = this.$route.query.userCode;
        var type = this.$route.query.type;
        type = type ? type : 0;
        switch (type.toString()) {
          case "0" :
          case "1" :
            var userCode = LocalDAO.getUserCode();
            if (checkUserCode == userCode) {
              this.headerOption.title = "我的历史交易记录";
            } else {
              this.headerOption.title = "他的历史交易记录";
            }
            break;
          case "2" :
            this.headerOption.title = "组合的历史交易记录";
            break;
          case "3" :
            this.headerOption.title = "比赛的历史交易记录";
            break;
        }
      },

      //上拉加载
      loadBottom () {
        this.getData();
      },

      //获取数据
      getData () {
        RemoteDAO.callGT1008(res => {//查询服务器当前日期和时间
          var today;
          if (res.error == "0") {
            today = new Date(this.transferFormatDate(res.data.body.date, '/'));
            var time = this.transferFormatTime(res.data.body.time).split(':');
            today.setHours(time[0], time[1], time[2]);
          } else {
            today = new Date();
          }
          var endDate = CommonUtil.formatNowDate(today);
          var startDate = CommonUtil.getStartDate(today, 30);
          var start = this.start.toString();
          var limit = this.limit.toString();
          RemoteDAO.callJCL11121(this.requireData.userCode, start, limit, startDate, endDate, this.requireData.type, this.requireData.id, response => {
            if (response.error == 0) {
              if(response.data.body.records.length > 0){
                this.totalRecords = this.totalRecords.concat(response.data.body.records);
                this.recordData.records = this.transferData(this.totalRecords);//对接口返回的数据进行处理重新封装
                if(response.data.body.records.length == this.limit){
                  this.start += this.limit;
                  this.$refs.loadmore.onBottomLoaded();//加载成功
                }else{
                  this.$refs.loadmore.onBottomAllLoaded();//无更多数据
                }
              }else{
                if(this.start == 0){
                  this.$refs.loadmore.onBottomError("暂无历史交易记录");//暂无历史交易记录
                }else{
                  this.$refs.loadmore.onBottomAllLoaded();//无更多数据
                }
              }
            } else {
              this.$refs.loadmore.onBottomError(response.data);//加载失败
            }
          })
        });
      },

      //封装数据
      transferData (totalRecords) {
        switch (parseInt(this.requireData.type)) {
          case 0 :                                  //转换所有的历史交易记录
          case 1 :                                  //转换股票的历史交易记录
          case 3 :
            return this.transferType(totalRecords);  //转换比赛的历史交易记录
          case 2 :
            return this.transferType2(totalRecords); //转换组合的历史交易记录
        }
      },

      //封装所有的、股票的、比赛的历史交易记录
      transferType (totalRecords) {
        if (totalRecords == undefined || totalRecords == null || totalRecords.length == 0) {
          return [];
        }
        var result = [];
        var index = 0;
        var size = totalRecords.length;
        while (index < size) {
          var recordItem = totalRecords[index]; //循环取历史记录中的单条记录
          if (recordItem.entrust_type == 2 && recordItem.entrust_typeid.length > 0) { //判断当前记录是组合历史交易记录
            var group = this.initGroup(recordItem); //对记录数据进行处理
            index++;
            while (index < size) {
              var record = totalRecords[index]; //获取下一条记录
              if (record.entrust_typeid == group.entrust_typeid && record.business_date == group.business_date && record.business_time == group.business_time) {  //两条记录时间相同，即为创建组合的记录
                var newSubrecord = this.transferRecordDate(record);
                group.subs.push(newSubrecord);
                if (group.reason1 == null && newSubrecord.reason1 != null) {
                  group.reason1 = newSubrecord.reason1;
                  group.reason2 = newSubrecord.reason2;
                  group.reason3 = newSubrecord.reason3;
                }
                index++;
              } else {
                index--;
                break;
              }
            }
            var date = new Date(this.transferFormatDate(group.business_date, '/'));
            group.business_date = date.getMonth() + 1 + "月 " + date.getDate() + "日";
            group.business_time = CommonUtil.formatHourMinute(group.business_time);
            result.push(group);
          } else {
            result.push(this.transferRecordDate(recordItem));
          }
          index++;
        }
        return result;
      },

      //所有的、股票的、比赛的历史交易记录数据转换
      initGroup (record) {
        var group = {};
        var subs = [];
        subs.push(record);
        Object.assign(group, record, {
          subs: subs,
          reason1: this.getReasonOption(record.reason1),
          reason2: this.getReasonOption(record.reason2),
          reason3: this.getReasonOption(record.reason3)
        });
        return group;
      },

      //封装组合的历史交易记录
      transferType2 (totalRecords) {
        if (totalRecords == undefined || totalRecords == null || totalRecords.length == 0) {
          return [];
        }
        var earliestD = totalRecords[0].business_date;
        var earliestT = totalRecords[0].business_time;
        var group = this.initGroup2(totalRecords[0]);//取组合历史交易记录的第一条数据进行格式化
        var result = [];
        for (let i = 0; i < totalRecords.length; i++) {
          var recordItem = totalRecords[i];
          if (recordItem.business_date == earliestD && recordItem.business_time == earliestT && (recordItem.entrust_bs % 2) == 1) {  //创建组合时买入的股票
            recordItem.business_time = CommonUtil.formatHourMinute(recordItem.business_time); //时间格式化 "hh:mm:ss"
            group.subs.push(recordItem);
            if ((group.reason1 == undefined || group.reason1 == null || group.reason1.length == 0 ) && (recordItem.reason1 != undefined || recordItem.reason1 != null ) && typeof recordItem.reason1 != 'object') {
              group.reason1 = this.getReasonOption(recordItem.reason1);
              group.reason2 = this.getReasonOption(recordItem.reason2);
              group.reason3 = this.getReasonOption(recordItem.reason3);
            }
          } else {
            recordItem.entrust_type = '1';
            recordItem.business_time = CommonUtil.formatHourMinute(recordItem.business_time);   //时间格式化 "hh:mm:ss"
            recordItem.business_date = this.transferFormatDate(recordItem.business_date, '/');  //日期格式化 "yyyy/mm/dd"
            var date = new Date(recordItem.business_date);
            recordItem.business_date = date.getMonth() + 1 + "月 " + date.getDate() + "日";    //日期格式化 "month月 date日"
            recordItem.reason1 = this.getReasonOption(recordItem.reason1);
            recordItem.reason2 = this.getReasonOption(recordItem.reason2);
            recordItem.reason3 = this.getReasonOption(recordItem.reason3);
            result.push(recordItem);
          }
        }
        //组合信息位于最后的位置
        result.push(group);
        return result;
      },

      //组合历史交易记录数据转换
      initGroup2 (record) {
        var group = {};
        group['entrust_type'] = record.entrust_type;
        group['entrust_typeid'] = record.entrust_typeid;
        group['group_name'] = this.requireData.name;
        var date = new Date(this.transferFormatDate(record.business_date, '/'));
        group['business_date'] = date.getMonth() + 1 + "月 " + date.getDate() + "日";
        group['business_time'] = CommonUtil.formatHourMinute(record.business_time);
        group['subs'] = [];
        group['reason1'] = this.getReasonOption(record.reason1);
        group['reason2'] = this.getReasonOption(record.reason2);
        group['reason3'] = this.getReasonOption(record.reason3);
        return group;
      },

      //对单条记录中的交易日期、时间及原因进行数据转换，其他字段数据不变，并返回新的对象
      transferRecordDate (record) {
        var result = {};
        var business_date = this.transferFormatDate(record.business_date, '/');
        var date = new Date(business_date);
        business_date = date.getMonth() + 1 + "月 " + date.getDate() + "日";
        Object.assign(result, record, {
          business_date: business_date,
          business_time: CommonUtil.formatHourMinute(record.business_time),
          reason1: this.getReasonOption(record.reason1),
          reason2: this.getReasonOption(record.reason2),
          reason3: this.getReasonOption(record.reason3)
        });
        return result;
      },

      //以指定的分隔符separator来格式化日期,例如 "yyyy/mm/dd" "yyyy-mm-dd"
      transferFormatDate (str, separator) {
        str = str + "";
        var year = str.substring(0, 4);
        var month = str.substring(4, 6);
        if (month.length <= 0) month = '01';
        var day = str.substring(6, 8);
        if (day.length <= 0) day = '01';
        return year + separator + month + separator + day;
      },

      //格式化时间,例如 "hh:mm:ss"
      transferFormatTime (time) {
        time = time + "";
        if (!isNaN(time) && time.length == 6 && time.indexOf(".") < 0) {
          time = time.replace(/^(\d{2})(\d{2})(\d{2})$/, "$1:$2:$3");
        } else if (!isNaN(time) && time.length == 5 && time.indexOf(".") < 0) {
          time = "0" + time;
          time = time.replace(/^(\d{2})(\d{2})(\d{2})$/, "$1:$2:$3");
        }
        return time;
      },

      //将调仓理由转化为新对象 {"reason_icon":"字体图标对应的类名","reason_text":"调仓理由"}
      getReasonOption (reason) {
        if (typeof reason == 'object') {
          return null;
        } else if (_.isEmpty(reason) || reason.indexOf("|") == -1) {
          return null;
        }
        var obj = {};
        var tempArray = reason.split("|");
        obj.reason_icon = Constant.REASON_ICON[tempArray[0]] ? Constant.REASON_ICON[tempArray[0]] : Constant.REASON_ICON["1"];
        obj.reason_text = tempArray.length == 2 ? tempArray[1] : "";
        return obj;
      },

      //点击股票名称跳转至原生股票详情页面
      toDetail (item) {
        var stockCode = item.stock_code;
        var exchangeType = item.exchange_type;
        if (exchangeType == 0) {
          stockCode = 'SZ' + stockCode;
        } else {
          stockCode = 'SH' + stockCode;
        }
        RemoteDAO.callStockLive(stockCode, 'ordinary', this.isLogin, response => {
          console.log(response);
        });
      }
    },
    filters: {
      //最多保留3位小数
      priceFilter (price) {
        if (!isNaN(price)) {
          price = price.toString()
        }
        if (price.indexOf('.') > 0) {
          var priceArr = price.split('.');
          if (priceArr[1].length > 3) {
            priceArr[1] = priceArr[1].substr(0, 3)
          }
          return priceArr[0] + '.' + priceArr[1]
        } else {
          return price;
        }
      }
    }
  }
</script>

<style scoped>
  .situation_records .records-loading-wrap{
    width: 100%;
    /*display: none;*/
    z-index: 2;
  }
  .situation_records .records-loading-wrap .records-loading_icon{
    width: 30px;
    margin: 0 auto;
  }

  /* 加载的动画 */
  .situation_records .records-loading{
    -webkit-animation: recordsLoading 1s linear 0s infinite ;
    animation: recordsLoading 1s linear 0s infinite ;
    text-align: center;
  }
  @-webkit-keyframes recordsLoading {
    0% {-webkit-transform: rotate(0deg);transform: rotate(0deg)}
    100% {-webkit-transform: rotate(360deg);transform: rotate(360deg)}
  }
  @keyframes recordsLoading {
    0% {-webkit-transform: rotate(0deg);transform: rotate(0deg)}
    100% {-webkit-transform: rotate(360deg);transform: rotate(360deg)}
  }
  .situation_records .no-records{
    width: 100%;
    text-align: center;
    color: #999999;
    margin-top: 1rem;
    font-size: 1.5rem;
  }
  .situation_records .shadow{
    height: 30px;
    background: -webkit-linear-gradient(top, #FFFFFF, rgba(255,255,255,0));
    /*background: linear-gradient(top, #FFFFFF, rgba(255,255,255,0));*/
  }
  .situation_records .records{
    position: absolute;
    top: 44px;
    /*bottom: 0;*/
    width: 100%;
  }
  .situation_records .records .records-item .entrust_bs{
  }
  .situation_records .records .records-item .stock-name{
    color: #3FB9EE;
    margin-left: 5px;
    /*width: 25%;*/
    /*white-space: nowrap;*/
    /*text-overflow: ellipsis;*/
    /*-o-text-overflow: ellipsis;*/
    /*overflow: hidden;*/
    /*display: inline-block;*/
  }
  .situation_records .records .records-item .number-wrap{
    /*width: 25%;*/
    /*overflow: hidden;*/
    /*display: inline-block;*/

  }
  .situation_records .records .records-item .number-wrap .number{
    /*white-space: nowrap;*/
    /*text-overflow: ellipsis;*/
    /*-o-text-overflow: ellipsis;*/
    /*overflow: hidden;*/
  }
  .situation_records .records .records-wrap{
    padding: 0;
    list-style: none;
    position: relative;
    height: 100%;
  }
  .situation_records .records-item{
    padding: 10px 0;
  }
  .situation_records .info_reason{
    background-color: #F5F5F5;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }
  .situation_records .info_reason i{
    margin-left: 10px;
  }
  .situation_records .group{
    width: 100%;
  }
  .situation_records .group_circle{
    font-size: 15px;
    color: white;
    height: 44px;
    width: 44px;
    display: block;
    text-align: center;
    line-height: 44px;
    background-image: url(~assets/images/chengquan.png);
    background-size: 100%;
    background-repeat: no-repeat;
    margin-left: 8px;
  }
  .situation_records .group_info-wrap{
    padding-right: 8px;
  }
  .situation_records .group .triangle{
    margin-top: 12px;
    height: 0;
    border-top: 6px solid transparent;
    border-left: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 6px solid #FC9258;
    margin-left: -6px;

  }
  .situation_records .group_info{
    border: solid 1px #FC9258;
    border-radius: 5px;
  }
  .situation_records .group_info_bar{
    background-color: #FC9258;
    color: white;
    font-size: 1.3rem;
    width: 100%;
    padding: 4px 10px;
    text-align: left;
  }
  .situation_records .group_info_bar .operation-wrap{
    float: right;
    max-width: 150px;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
  }
  .situation_records .group_info_bar .operation-wrap .operation{
    margin-left: 5px;
  }
  .situation_records .group_info_detail-wrap{
    margin: 8px auto;
  }
  .situation_records .group_info_detail_item{
    color: #999999;
    margin: 1px 2px 1px 10px;
  }

  .situation_records .group_info_detail_item .price-wrap{
    margin-left: 5px;
  }
  .situation_records .group_info_detail_item .price{
    color: #565656;
    text-overflow:ellipsis;
    -o-text-overflow:ellipsis;
    /*overflow: hidden;*/
    margin-left: 5px;
  }

  .situation_records .sell{
    width: 100%;
  }
  .situation_records .sell_circle{
    font-size: 15px;
    color: white;
    height: 44px;
    width: 44px;
    text-align: center;
    line-height: 44px;
    background-image: url(~assets/images/lanquan.png);
    background-size: 100%;
    background-repeat: no-repeat;
    margin-left: 8px;

  }
  .situation_records .sell_info-wrap{
    padding-right: 8px;
  }
  .situation_records .sell .triangle{
    margin-top: 12px;
    height: 0;
    border-top: 6px solid transparent;
    border-left: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 6px solid #3FB9EE;
    margin-left: -6px;
  }
  .situation_records .sell_info{
    border: solid 1px #3FB9EE;
    border-radius: 5px;
  }
  .situation_records .sell_info_bar{
    background-color: #3FB9EE;
    color: white;
    font-size: 1.3rem;
    width: 100%;
    padding: 4px 10px;
    text-align: left;
  }
  .situation_records .sell_info_bar .operation{
    float: right;
  }
  .situation_records .sell_info_detail{
    text-align: left;
    margin: 8px 10px;
    color: #999999;
  }

  .situation_records .records-item .number{
    margin-left: 5px;
  }
  .situation_records .price{
    color: #565656;
    margin-left: 5px;
  }

  .situation_records .buy{
    width: 100%;
  }
  .situation_records .records-item .circle_td{
    vertical-align: top;
    width: 44px;
  }
  .situation_records .buy_circle{
    font-size: 15px;
    color: white;
    height: 44px;
    width: 44px;
    text-align: center;
    line-height: 44px;
    background-image: url(~assets/images/hongquan.png);
    background-size: 100%;
    background-repeat: no-repeat;
    /* background-attachment: initial; */
    /* position: absolute; */
    /* left: 0px; */
    /* top: 10px; */
    /* display: inline-block; */
    margin-left: 8px;
  }
  .situation_records .triangle_td{
    vertical-align: top;
  }
  .situation_records .buy_info-wrap{
    padding-right: 8px;
  }
  .situation_records .buy .triangle{
    margin-top: 12px;
    /* width: 0; */
    height: 0;
    border-top: 6px solid transparent;
    border-left: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 6px solid #FF5760;
    /* line-height: 1.6rem; */
    /* position: absolute; */
    /* top: 0; */
    /* left: 73px; */
    margin-left: -6px;
    /* display: inline-block; */
  }
  .situation_records .buy_info{
    border: solid 1px #FF5760;
    border-radius: 5px;
    /* position: relative; */
    /* left: 12px; */
    /* right: 0; */
    /* top: 0; */
    /* display: inline-block; */
  }
  .situation_records .buy_info_bar{
    background-color: #FF5760;
    color: white;
    font-size: 1.3rem;
    width: 100%;
    padding: 4px 10px;
    text-align: left;
  }
  .situation_records .buy_info_bar .operation{
    float: right;
  }
  .situation_records .buy_info_detail {
    text-align: left;
    margin: 8px 10px;
    color: #999999;
  }
  .situation_records .line-vert{
    left: 29px;
    height: 100%;
    width: 1px;
    background-color: #D5D5D5;
    position: absolute;
    top: 0px;
    z-index: -1;
  }
  .info_reason {
    background: #e9e9e9;
  }
</style>
